<template>
	<el-dialog v-model="props.isShow" width="30%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				定期详情
			</div>
		</template>
		<div>
			<div class="flex justify-between items-center">
				<div class="flex items-center">
					<img src="/purchase/usdt.svg" class="w-34px h-34px"/>
					<p class="ml-10px text-16px">USDT</p>
				</div>
				<el-button color="#114CEE" disabled>开立中</el-button>
			</div>
			<div class="text-14px text-#86909C mt-30px">
				<div class="flex items-center justify-between"> 
					<p>订单号</p>
					<div class="text-#000000 flex items-center">
						<p >2325356225625</p>
						<img class="ml-10px w-16px h-16px" src="/transaction/spot/copy.svg" />
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>产品名称</p>
					<div class="text-#000000 flex items-center">
						<p >欧神理财宝</p>
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>数量</p>
					<div class="text-#000000 flex items-center">
						<p >10000</p>
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>预计年化利率</p>
					<div class="text-#000000 flex items-center">
						<p >7%</p>
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>存入时间</p>
					<div class="text-#000000 flex items-center">
						<p >2025-02-03</p>
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>期限</p>
					<div class="text-#000000 flex items-center">
						<p >3天</p>
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>计息结束日</p>
					<div class="text-#000000 flex items-center">
						<p >2025-02-03</p>
					</div>
				</div>
				<div class="flex items-center justify-between mt-10px"> 
					<p>利息到账日</p>
					<div class="text-#000000 flex items-center">
						<p >2025-02-18</p>
					</div>
				</div>
			</div>
			<div class="mt-30px rounded-10px bg-#F7F7F7
			h-130px box-border p-20px">
				<div class="flex items-center justify-between">
					<p class="text-16px font-bold text-#000000">自动锁仓</p>
					<el-switch v-model="openValue"
					style="--el-switch-on-color: #114CEE"/>
				</div>
				<p class="text-14px mt-10px text-#86909C">
					一旦您激活自动锁仓按钮，您锁仓的产品到期后，它将自动锁仓相同周期的产品并开始计息。
				</p>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
interface IProps {
	isShow: boolean
}
const props = defineProps<IProps>();

const emits = defineEmits(['close'])

const openValue = ref<boolean>(false);
const close = () => {
	emits('close', false)
}
</script>
